<template>
    <div class="main"> <!--整个页面-->

        <!--注册信息-->
        <el-row class="content">
            <el-col :span="8" :offset="10">
                <el-card shadow="hover">
<!--                    <h1>欢迎注册论坛 <small><i class="el-icon-fork-spoon"></i></small></h1>-->
                    <el-row>
                        <el-col :span="14">
                            <h1>欢迎注册论坛 <small><i class="el-icon-fork-spoon"></i></small></h1>
                        </el-col>
                        <el-col :span="8" :offset="2" class="login_now">
                            <!--href="login"  根据 login.vue中  script里的 name属性来定位  而不是路由-->
                            已有账号？<el-link type="primary" href="/login">马上登录</el-link>
                        </el-col>
                    </el-row>

                    <el-form status-icon :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" id="ruleForm">
                        <!-- 必填信息 -->
                        <div  name="reg_part11" >
                            <el-form-item label="用户名：" prop="name" >
                                <el-input v-model="ruleForm.name" clearable placeholder="6到16位，由数字、字母和下划线构成，且必须以下划线或字母开头" name="uname"></el-input>
                            </el-form-item>
                            <div class="tips">(Tips: 用户名是区分每个用户的唯一标志)</div>
                            <el-form-item label="密码：" prop="password" class="password">
                                <el-input name="upwd" placeholder="6到16位" v-model="ruleForm.password" show-password ></el-input>
                            </el-form-item>
                        </div>

                        <!--可选信息-->
                        <div hidden name="reg_part21">
                            <div slot="tip" name="reg_part210" class="el-upload__tip tips">tips:该部分信息可选择填写或者跳过填写。</div>
                            <!--昵称-->
                            <el-form-item label="昵称：" prop="nickName"  name="reg_part211" id="nickName">
                                <el-input v-model="ruleForm.nickName" clearable placeholder="小于等于15个字符" name="nickName" ></el-input>
                            </el-form-item>
                            <!--头像-->
                            <el-form-item label="头像：" name="reg_part212" id="headImg">
                                <!--on-change 添加文件、上传成功和上传失败时都会被调用-->
                                <el-upload
                                        ref="headImg"
                                        :on-change="handleFileChange"
                                        :auto-upload="false"
                                        name="file"
                                        class="avatar-uploader"
                                        :action="this.GLOBAL.serverBaseUrl + this.GLOBAL.userTestFile"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :on-error="handleAvatarError"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar" alt="">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                            <!--个性签名-->
                            <el-form-item label="个性签名：" prop="motto" name="reg_part213" id="motto">
                                <el-input name="motto" v-model="ruleForm.motto" clearable placeholder="小于等于30个字符" ></el-input>
                            </el-form-item>
                            <!--邮箱-->
                            <el-form-item label="邮箱：" name="reg_part214" prop="email" id="email">
                                <el-input name="email" v-model="ruleForm.email" clearable placeholder="你的邮箱，例如123@qq.com" type="email" ></el-input>
                            </el-form-item>
                            <!--生日-->
                            <el-form-item label="生日：" name="reg_part215" id="birthday">
                                <div class="block">
                                    <!--这里日期选择器 el-date-picker 默认返回的是一个Date对象，如果和一个字符串变量绑定，
                                        结果可能会是这样的：Sat Apr 10 2021 00:00:00 GMT+0800 (中国标准时间)
                                        但是如果直接通过name属性传到后台  它就是默认的字符串  如：2021-5-12-->
                                    <el-date-picker name="birthday"
                                            v-model="ruleForm.birthday"
                                            type="date"
                                            placeholder="设置您的出生日期">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                            <!--所在地区-->
                            <el-form-item label="所在地区：" name="reg_part216" id="area">
                                <div class="block">
                                    <el-cascader name="area"
                                            clearable
                                            v-model="ruleForm.area"
                                            :options="options"
                                            :props="{ expandTrigger: 'hover' }"
                                            @change="handleChange"></el-cascader>
                                </div>
                            </el-form-item>
                            <!--个人简介-->
                            <el-form-item label="个人简介：" prop="intro" name="reg_part217" id="intro">
                                <el-input
                                        name="intro"
                                        type="textarea"
                                        :autosize="{ minRows: 2, maxRows: 5}"
                                        placeholder="简单介绍一下自己，（不大于300个字符）"
                                        v-model="ruleForm.intro">
                                </el-input>
                            </el-form-item>
                        </div>

                    </el-form>
                </el-card>
            </el-col>
        </el-row>

        <!--进度信息-->
        <el-row>
            <el-col :span="14" :offset="7">
                <el-steps :active='activePo' align-center finish-status="success">
                    <el-step title="必填信息"  description="(该部分为注册必填信息)"></el-step>
                    <el-step title="可选信息" description="(此部分信息可跳过填写，之后可在个人中心里修改)"></el-step>
                    <el-step title="立即注册！" description="(完成注册!)"></el-step>
                </el-steps>
            </el-col>
        </el-row>
        <el-row class="progress_btn">
            <el-col :offset="8" :span="2">
                <!--在这里好像直接对button 加 hidden 他不会直接隐藏（普通html可以） 得放在父div里 -->
                <div  name="reg_part12">
                    <el-button type="primary" round @click="toNext1('ruleForm')" id="aaa" size="medium">下一步</el-button>
                </div>
                <pre></pre> <!--当按钮隐藏的时候 用一个pre标签占位置 不然整行会往左缩-->
            </el-col>
            <el-col :offset="2" :span="5" >
                <div hidden name="reg_part22">
                    <el-tooltip content="返回必填信息填写" placement="left-end" effect="light">
                        <el-button type="primary" round size="medium" @click="toFormer1()">上一步</el-button>
                    </el-tooltip>
                    <el-tooltip content="忽略此部分信息，只使用用户名和密码注册" placement="bottom" effect="light">
                        <el-button type="warning" round size="medium" @click="pass">跳过</el-button>
                    </el-tooltip>
                    <el-tooltip content="使用当前已填写的信息注册" placement="right-end" effect="light">
                        <el-button type="primary" round size="medium" @click="toNext2('ruleForm')">下一步</el-button>
                    </el-tooltip>
                </div>
                <pre></pre>
            </el-col>
            <el-col :span="4" >
                <div hidden name="reg_part3">
                    <el-button type="primary" round size="medium" v-on:click="toFormer2()">上一步</el-button>
                    <el-tooltip content="将使用上方的信息进行用户注册" placement="right-start" effect="light">
                        <el-button type="success" round size="medium" @click="register('ruleForm')">立即注册</el-button>
                    </el-tooltip>
                </div>
                <pre></pre>
            </el-col>
        </el-row>

        <!--注册结果模态对话框-->
        <el-dialog
                center
                title="注册结果"
                :visible.sync="dialogVisible"
                width="30%">
            <div class="center">
                <div>{{regRs}}</div>
                <div slot="tip" v-if="!regSuccess" class="el-upload__tip">详细信息：<span class="red_color">{{regRsInfo}}</span></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="success" plain size="medium" @click="backToLogin" v-if="regSuccess">立即登录</el-button>
                <el-button type="info" plain @click="backToLogin" size="medium" v-if="!regSuccess">返回登录</el-button>
                <el-button type="warning" plain @click="reTry" size="medium" class="margin_left" v-if="!regSuccess">重试</el-button>
            </span>
        </el-dialog>

        <!--版权信息-->
        <el-row type="flex" justify="end">
            <el-col :span="6" >
                <footer> <!--底部版权-->
                    Copyright © 2020 GuoJunhui.
                    <!--            <a href="javascript:void(0)" style="color: #868a6f;">All Rights Reserved.</a>-->
                    <el-link href="javascript:void(0)">All Rights Reserved.</el-link>
                </footer>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import $ from 'jquery';  /*引入jquery*/
    export default {
        name: "register",
        data() {
            var checkEmail = (rule, value, callback) => {
                if (value !== ''){
                    let po = -1;  // @ 所在index
                    //检测是否包含@
                    for (let i = 0; i < value.length; i++){   /*let 类型 语句块作用域*/
                        let char = value.charAt(i);
                        if (char === '@'){
                            po = i;
                            break;
                        }
                    }
                    if (po === -1){
                        callback(new Error("邮箱地址必须包含@"));
                    }
                    //检测@前是否全为数字或者字母
                    var frontString = value.substring(0, po-1); /*@ 前的字符串*/
                    for (let i = 0; i < frontString.length; i++){
                        let char = frontString.charAt(i);
                        if(!((char >= '0' && char <= '9') || (char >= 'a' && char <= 'z'))){
                            callback(new Error("邮箱地址@前只能包含数字和字母"));
                        }
                    }
                    //检测@后面是否包含.com
                    var latterString = value.substring(po+1);
                    if (!latterString.includes('.com')){
                        callback(new Error("邮箱地址必须包括.com"));
                    }
                    //检测@后面是否只包含字母和.
                    for (let i = 0; i < latterString.length; i++){
                        let char = latterString.charAt(i);
                        if(!((char === '.') || (char >= 'a' && char <= 'z'))){
                            callback(new Error("邮箱地址@后只能包含.和字母"));
                        }
                    }
                }
                callback();
            };
            var checkName = (rule, value, callback) => {
                /*检测用户名必须以 下划线或字母开头（大小写都可）*/
                var firstChar = value.charAt(0);
                // if (firstChar !== '_' && firstChar < )
                if ((firstChar < 'A' || firstChar > 'z') || (firstChar > 'Z' && firstChar < 'a' && firstChar !== '_')){
                    callback(new Error("用户名必须以字母或下划线开头！"));
                }

                //检测用户名是否只包含 字母 下划线和数字
                for (var i = 0; i < value.length; i++){
                    var char = value.charAt(i);
                    if (char < '0' || (char > '9' && char < 'A') || char > 'z'){
                        callback(new Error("用户名只能包含字母、数字和下划线"));
                    }
                    // char 在 Z 和 a 之间
                    if (char > 'Z' && char < 'a' && char !== '_'){
                        callback(new Error("用户名只能包含字母、数字和下划线"));
                    }
                }

                callback();
            };
            var checkIfUserExist = (rule, value, callback) => {
                /*检测用户名是否已被使用*/
                // this.$http.get("http://localhost:8081/user/userExist?&uname=" + this.ruleForm.name).then(req=>{
                this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userExist + "?&uname=" + this.ruleForm.name).then(req=>{
                    if (req.data.result_code === 200){
                        callback();
                    }else{
                        callback(new Error(req.data.msg));
                    }
                });
            };
            return {
                regRsInfo: '',  /*注册结果详细信息， 用来显示错误信息*/
                regRs: '',  /*注册结果*/
                regSuccess: true,  /*注册结果，用于模态框中按钮的显示*/
                dialogVisible: false,
                ruleForm: {
                    name: '',
                    password: '',
                    nickName: '',
                    motto: '',
                    email: '',
                    birthday: '',
                    area: [],  /*数组类型*/
                    intro: '',
                    imageUrl: '',
                    simpleReg: true, /*简单注册，只提交用户名和密码注册，  */
                },   // {} 表示  object对象类型
                rules: {
                    name: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
                        { validator: checkName, trigger: 'blur' },
                        { validator: checkIfUserExist, trigger: 'blur' }
                    ],
                    password: [
                        { required:true, message: '请输入密码', trigger: 'blur'}, /*在失去焦点时触发*/
                        { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
                    ],
                    nickName: [
                        { max: 15, message: '长度最大为15个字符', trigger: 'blur' }
                    ],
                    motto: [
                        { max: 15, message: '长度最大为30个字符', trigger: 'blur' }
                    ],
                    intro: [
                        { max: 300, message: '长度最大为300个字符', trigger: 'blur'}
                    ],
                    email: [
                        { validator: checkEmail, trigger: 'blur' }
                    ]
                },
                activePo: 0,  /*当前步骤位置的索引*/
                options: [{
                    value: '江西省',
                    label: '江西省',
                    children: [{
                        value: '南昌市',
                        label: '南昌市',
                    },
                    {
                        value: '新余市',
                        label: '新余市',
                    },{
                            value: '景德镇',
                            label: '景德镇',
                    },{
                            value: '吉安市',
                            label: '吉安市',
                    }]
                },{
                    value: '江苏省',
                    label: '江苏省',
                    children: [{
                        value: '苏州市',
                        label: '苏州市',
                    },
                        {
                            value: '南京市',
                            label: '南京市',
                        }]
                },{
                    value: '湖南省',
                    label: '湖南省',
                    children: [{
                        value: '长沙市',
                        label: '长沙市',
                    },
                        {
                            value: '张家界',
                            label: '张家界',
                        }]
                }]
            };
        },
        methods: {

            handleFileChange(file){
                console.log("handleFileChange123");
                //不知为什么， 在这里 直接file.type无法直接获取文件类型（undefined）， 不过可以 file.name 获取文件名
                var o = file.name;
                var pos=o.lastIndexOf('.');  //转义一下
                var fileType = o.substring(pos+1);
                fileType = fileType.toLowerCase(); //一律转为小写
                console.log("文件类型：" + fileType);

                const isJPG = (fileType === 'jpg' || fileType === 'png');
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
                    return;
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    return;
                }
                this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
            },
            handleAvatarSuccess(res, file) {
                alert("上传成功。");
                this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
            },
            handleAvatarError(){
                alert("上传失败。");
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleChange(value) {
                console.log(value);
            },
            /*跳转到第二部分注册信息*/
            toNext1(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        $("div[name^='reg_part1']").attr("hidden", "hidden");  //隐藏第一部分的必填信息和按钮
                        $("div[name^='reg_part2']").removeAttr("hidden");  //显示第二部分的可选信息及按钮
                        this.activePo++;  /*进度位置后移一位*/
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            /*在第二部分注册信息 跳回到第一部分*/
            toFormer1(){
                $("div[name^='reg_part2']").attr("hidden", "hidden");  //隐藏第二部分的可选信息和按钮
                $("div[name^='reg_part1']").removeAttr("hidden");  //显示第一部分的必填信息及按钮
                this.activePo--;  /*进度位置前移一位*/
            },
            /*在第三部分注册 跳回到第二可选信息部分*/
            toFormer2(){
                $("div[name^='reg_part1']").attr("hidden", "hidden");
                $("div[name^='reg_part3']").attr("hidden", "hidden");
                $("div[name^='reg_part2']").removeAttr("hidden");
                this.activePo--;  /*进度位置前移一位*/
                this.ruleForm.simpleReg = false;
            },
            /*在第二部分注册信息  跳过第二部分信息填写   到第三部分*/
            pass(){
                $("div[name^='reg_part2']").attr("hidden", "hidden");  //隐藏第二部分的可选信息和按钮
                $("div[name='reg_part11']").removeAttr("hidden");  //显示第一部分的必填信息（不包括按钮）
                $("div[name='reg_part3']").removeAttr("hidden");  //显示第三部分的按钮
                this.activePo++;  /*进度位置后移一位*/
                this.ruleForm.simpleReg = true;
            },
            /*在第二部分注册信息 下一步进入最终注册页面（显示用户已填写的信息及按钮）*/
            toNext2(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $("div[name='reg_part11']").removeAttr("hidden");  //显示第一部分的必填信息（不包括按钮）
                        $("div[name='reg_part22']").attr("hidden", "hidden");  //隐藏第二部分的按钮(不包括可选信息)
                        $("div[name='reg_part210']").attr("hidden", "hidden");  //隐藏第二部分的提示文字
                        /*如果第二部分的 对应内容为空(不填写默认为空字符串 不是null)则移除对应内容*/
                        if (this.ruleForm.nickName === ""){
                            $("#nickName").attr("hidden", "hidden");
                        }
                        if (this.ruleForm.imageUrl === ""){  /*头像*/
                            $("#headImg").attr("hidden", "hidden");
                        }
                        if (this.ruleForm.motto === ""){
                            $("#motto").attr("hidden", "hidden");
                        }
                        if (this.ruleForm.email === ""){
                            $("#email").attr("hidden", "hidden");
                        }
                        if (this.ruleForm.birthday === ""){
                            $("#birthday").attr("hidden", "hidden");
                        }
                        if (this.ruleForm.area.length === 0){
                            $("#area").attr("hidden", "hidden");
                        }
                        if (this.ruleForm.intro === ""){
                            $("#intro").attr("hidden", "hidden");
                        }

                        $("div[name='reg_part3']").removeAttr("hidden");  //显示第三部分的按钮

                        this.activePo++;  /*进度位置后移一位*/
                        this.ruleForm.simpleReg = false;
                        console.log(this.ruleForm);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            register(formName){
                // let date = this.ruleForm.birthday;
                // this.$http.get("http://localhost:8081/user/reg?date=" + date).then(req=>{
                //     if (req.data != ""){
                //         alert(req.data);
                //     }
                // })
                // this.$refs.headImg.submit().then(req=>{
                //     console.log("req:" + req.data);
                // });
                this.$confirm('确认注册吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'   /*success / info / warning / error*/
                }).then(() => {  /*确认注册*/
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let formData;
                            let wholeFormData = new FormData($('#ruleForm')[0]);
                            wholeFormData.append("area", this.ruleForm.area);
                            formData = wholeFormData;

                            /*如果是简单注册，则只提交用户名和密码*/
                            let simpleFormData = new FormData();
                            simpleFormData.append("uname", this.ruleForm.name);
                            simpleFormData.append("upwd", this.ruleForm.password);
                            if (this.ruleForm.simpleReg){
                                formData = simpleFormData;
                            }
                            // this.$http.post("http://localhost:8081/user/reg", formData).then(req=>{
                            this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.userReg, formData).then(req=>{
                                this.dialogVisible = true;
                                if (req.data.result_code === 200){
                                    this.regSuccess = true;
                                    this.regRs = req.data.msg;
                                }else {
                                    this.regRs = "注册失败";
                                    this.regRsInfo = req.data.msg;
                                    this.regSuccess = false;
                                }
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }).catch(() => {  /*取消注册*/
                    this.$message({
                        type: 'info',
                        message: '取消注册'
                    });
                });

            },
            backToLogin(){  /*返回登录*/
                this.$router.push({name:"login"}); //跳转到 login.vue
            },
            reTry(){   /*重新注册*/
                location.reload();  //刷新页面
            }
        }
    }
</script>

<style scoped>
    footer{
       background-color: rgba(240, 248, 255, .6);
        height: 52px;
        line-height: 52px;
        font-size: medium;
        border-radius: 5px;
        text-align: center;
    }
    h1{
        margin-left: 15px;
        margin-top: 4px;
        margin-bottom: 42px;
    }

    /*已有账号？马上登录 字样框 row*/
    .login_now{
        margin-top: 16px;
    }
    /*重试按钮 和  左边的  返回登录按钮拉开点距离*/
    .margin_left{
        margin-left: 50px;
    }
    /*头像上传框样式*/
    .avatar-uploader{
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 178px;
        height: 178px;
    }
    .avatar-uploader:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }


    /*注册进度条行  row*/
    div[class^='content']+div{
        /*background-color: #42b983;*/
        margin-top: 37px;
    }

    /*进度条按钮行 row*/
    .progress_btn{
        margin-top: 20px;
    }
    .progress_btn > div:nth-child(1){
        /*background-color: #42b983;*/
        padding-left: 45px;
    }
    .progress_btn > div:nth-child(2){
        /*background-color: #42b983;*/
        padding-left: 0px;
    }
    .progress_btn > div:nth-child(3){
        /*background-color: #42b983;*/
        padding-left: 13px;
    }

    /*密码框*/
    .password{
        margin-bottom: 30px;
    }

    /*注册item 提示信息*/
    .tips{
        color: #f17008;
        margin-left: 98px;
        font-size: 15px;
        margin-bottom: 40px;
    }

    /*整个页面*/
    .main{
        background-image: url("../../assets/images/reg_bgimg.jpg");
        /*background-image: url("../assets/images/login_bgimg.jpg");*/
        /*height: 1000px;*/
        background-size: 100% 100%;  /*图片放满  （原比例可能受到影响）*/
        /*background-size: cover;*/
        background-repeat: no-repeat;
        /*height: 856px;*/
        height: 100%;  /*正好占满整个浏览器的高度（不同屏幕下高度可能不一样，但都能占满）*/
        /*height: 1100px;*/
    }

    /*注册信息填写行*/
    .content{
        padding-top: 140px;
    }



</style>